<template>
  <div id="panel">
    <template>
      <el-card class="queryForm">
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          :label-position="'right'"
        >
          <el-form-item label="监测点位：" prop="segmtype" class="times">
            <el-select
              v-model="queryParams.segmtype"
              multiple
              collapse-tags
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.segmentname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围：" prop="segmentcategory" class="times">
            <el-date-picker
              :clearable="false"
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
              style="padding: 10px"
              >查询</el-button
            >
            <el-button @click="resetQuery" style="padding: 10px">
              <i class="iconfont icon-saoba"></i>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="pageContent">
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
          :lazy="false"
        >
          <el-tab-pane label="国控" name="0">
            <guok
              ref="guok"
              v-if="activeName == '0'"
              :times="value1"
              :ids="queryParams.segmtype"
            />
          </el-tab-pane>
          <el-tab-pane label="省控" name="1">
            <shengk
              ref="shengk"
              v-if="activeName == '1'"
              :times="value1"
              :ids="queryParams.segmtype"
            />
          </el-tab-pane>
          <el-tab-pane label="市控" name="2">
            <shik
              ref="shik"
              v-if="activeName == '2'"
              :times="value1"
              :ids="queryParams.segmtype"
            />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </template>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { getDmList } from "@/api/dataResources/monitorData/section.js";
import { formatDate } from "@/utils/ruoyi";
export default {
  name: "waterQuality",
  components: {
    guok: () => import("./stateControlled.vue"),
    shengk: () => import("./provincialControl.vue"),
    shik: () => import("./MarketControl.vue"),
  },
  data() {
    return {
      activeName: "0",
      // 查询参数
      queryParams: {
        segmtype: [],
      },
      // 表单参数
      form: {},
      value1: "",
      // 表单校验
      rules: {},
      // 列表数据
      list: null,
      listLoading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      options: [],
    };
  },
  created() {
    this.value1 = this.getDefaultDateRange();
  },
  mounted() {
    this.getGm();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      this.handleQuery();
    },
    // 获取默认时间范围：[本月第一天, 当前日期]
    getDefaultDateRange() {
      // 结束时间：当前日期（格式与原项目的formatDate保持一致）
      const today = dayjs().format("YYYY-MM-DD"); // 假设原formatDate输出是"YYYY-MM-DD"格式
      // 起始时间：当前日期往前推6个月
      const sixMonthsAgo = dayjs().subtract(6, "month").format("YYYY-MM-DD");

      return [sixMonthsAgo, today];
    },
    //获取点位的列表
    getGm() {
      let query = {
        pageNum: 1,
        pageSize: 1000,
        ismanual: "1",
        isdrink: "0",
      };
      getDmList(query).then((res) => {
        console.log(">>>ssss", res);
        this.options = res.rows;
        this.queryParams.segmtype = [];
        debugger;
        if (this.queryParams.segmtype.length === 0) {
          res.rows.map((item) => this.queryParams.segmtype.push(item.id));
        }
        // 获取完下拉之后根据默认选择的类型进行数据请求
        if (this.activeName === "0") {
          this.$nextTick(() => {
            if (this.$refs.guok) {
              this.$refs.guok.initData();
            }
          });
        } else if (this.activeName === "1") {
          this.$nextTick(() => {
            if (this.$refs.shengk) {
              this.$refs.shengk.initData();
            }
          });
        } else if (this.activeName === "2") {
          this.$nextTick(() => {
            if (this.$refs.shik) {
              this.$refs.shik.initData();
            }
          });
        }
      });
    },

    //搜索
    handleQuery() {
      debugger;
      if (this.activeName === "0") {
        // this.$nextTick(() => {
        //   if (this.$refs.guok) {
        //     this.$refs.guok.initData();
        //   }
        // });
        this.callChildMethod("guok");
      } else if (this.activeName === "1") {
        // this.$nextTick(() => {
        //   if (this.$refs.shengk) {
        //     this.$refs.shengk.initData();
        //   }
        // });
        this.callChildMethod("shengk");
      } else if (this.activeName === "2") {
        // this.$nextTick(() => {
        //   if (this.$refs.shik) {
        //     this.$refs.shik.initData();
        //   }
        // });
        this.callChildMethod("shik");
      }
    },

    // 调用子组件方法（带重试机制）
    callChildMethod(refName, checkTimes = 0) {
      // 超过最大重试次数，停止检测
      if (checkTimes >= this.maxCheckTimes) {
        console.warn(`子组件 ${refName} 未加载成功`);
        return;
      }

      // 获取子组件实例
      const childComp = this.$refs[refName];

      if (childComp && typeof childComp.initData === "function") {
        // 子组件已加载，调用目标方法
        childComp.initData();
      } else {
        // 未加载成功，延迟重试（等待渲染）
        setTimeout(() => {
          this.callChildMethod(refName, checkTimes + 1);
        }, this.checkInterval);
      }
    },
    //重置、清除表单
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

img {
  vertical-align: middle;
}

#panel {
  padding-bottom: 40px;
  min-height: calc(100% - 20px);
  margin: 0;

  // 控制分页的样式----二次开发
  .pagination-self {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
    position: relative;

    .el-pagination__total {
      position: absolute;
      left: 5px;
      color: #409eff;
      font-weight: 600;
      font-size: 15px;
    }
  }

  // 控制分页刷新按钮样式
  .refresh-button {
    .el-icon-refresh {
      font-size: 18px;
      line-height: 28px;
    }
  }

  .el-card {
    margin: 10px;
  }

  .queryForm .el-card__body {
    padding: 0 20px !important;
  }

  .queryForm {
    // .el-card__body {
    //   padding-left: 0 !important;
    // }
    .el-form-item {
      margin: 20px 0 20px 20px;
    }

    .el-form-item:first-child {
      margin-left: 0 !important;
    }

    .el-form-item__label {
      padding-right: 5px;
      color: #555;
    }

    .times {
      .el-form-item__content {
        width: 250px;
      }
    }

    .el-form-item__content {
      min-width: 200px;
      // & > div {
      //   width: 100% !important;
      // }
    }

    .searchBtnBox {
      display: inline-block;
      margin: 20px 0 20px 20px;
    }
  }

  .pageContent {
    .tabs-list {
      padding-top: 20px;
    }

    .el-tabs__header {
      background: #fff;
    }

    .el-tabs__item {
      border: 1px solid #eee;
      margin: 0;
      border-left: 0;
      background: #fafbfc;
      color: #000;
    }

    .el-tabs__item:first-child {
      margin-left: 20px;
      border-left: 1px solid #eee;
    }

    .is-active {
      border-bottom: 0 !important;
      background: #fff;
      color: #307eff;
    }
  }

  .anjian label {
    padding: 0 !important;
    width: 100px !important;
  }

  .queryForm .el-checkbox {
    margin-right: 10px !important;
    width: auto !important;
  }

  .iszgfc .el-form-item__content {
    width: 120px;
  }
}
// 左右横排的标题和更多
.titleBox {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dfe4ed;
  margin: 0 20px 20px 20px;
  position: relative;
  &::before {
    display: block;
    content: "";
    width: 3px;
    height: 16px;
    background: #307eff;
  }
  .title {
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 10px;
    font-weight: 500;
  }
  .more {
    font-size: 16px;
    color: #999;
    cursor: pointer;
  }
}
</style>
